<template>
	<view class="Hmain">
		<view class="Hrecord">
			<view class="head">
				<view class="Hday">
					<picker mode="date" fields="month" :value="date" start="2018-09-01" end="2020-09-01" @change="DateChange">
						<view class="uni-list-cell-left">
							选择日期
							<van-icon name="arrow-down" />
						</view>
						<view class="picker">{{date}}</view>
					</picker>
				</view>
				<view class="Hmoney">
					<view>
						<text>总支出：￥{{Number(allList.expenditure).toFixed(2)}}</text>
					</view>
					<view>
						<text>总收入：￥{{Number(allList.income).toFixed(2)}}</text>
					</view>
				</view>
			</view>
			
			<view class="nullData" style="margin-top: 30rpx; text-align: center;" v-if="hsList.length == 0">
				当月暂时没有数据
			</view>
			<view class="Hcontent" v-for="item in hsList" :key="item.id">
				<view class="user">
					<image style="width: 100rpx;height: 100rpx;border-radius: 100rpx;" :src="item.avatar" mode=""></image>
					<text style="color: #333333;font-size: 28rpx;margin-left: 16rpx;margin-top: 16rpx;">社区团购购物</text>
					<view class="today">
						{{item.createTime}}
					</view>
				</view>
				<view class="profit">
					<text>￥{{item.money>0?'+':''}}{{Number(item.money).toFixed(2)}}</text>
				</view>
			</view>
			
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				hsList: [],
				date: '',
				allList: [],
				expenditure: '',
				income: '',
			}
		},

		onLoad() {
			let dateNow = new Date()
			this.date = dateNow.getFullYear() +  '-' + (dateNow.getMonth() + 1 + '').padStart(2, '0');
			this.getList()
			this.getAll()
			
		},
		
		methods: {
			DateChange(e) {
				this.date = e.detail.value
				this.getList()
			},
			
			// 查询流水
			getList() {
				const requestHsList = {
					url: `/api/runningWater/list`,
					method: "POST",
					data: {
						content: this.date,
						current: 1,
						size: 10
					},
					callBack: (res) => {
						if (res.code == 200) {
							this.text = 'request success';
							this.hsList = res.data.records
						}
					}
				}
				this.$http.request(requestHsList)
			},
			
			// 查询总收入，支出
			getAll(){
				const requestALL = {
					url: `/api/runningWater/expenditureIncome`,
					method: "get",
					callBack: (res) => {
						if (res.code == 200) {
							console.log(res.data)
							this.text = 'request success';
							this.allList = res.data
						}
					}
				}
				this.$http.request(requestALL)
			}
		}
	}
</script>

<style>
	page {
		background-color: #F1F1F1;
	}

	.Hrecord {
		width: 100%;
		background-color: #FFFFFF;
	}

	.Hrecord .head {
		width: 100%;
		height: 80rpx;
		border-bottom: 4rpx solid #F1F1F1;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.head .Hday .text {
		color: #333333;
		font-size: 24rpx;
		margin-left: 20rpx;
	}

	.Hday {
		margin-left: 20rpx;
	}

	.Hmoney text {
		color: #333333;
		font-size: 24rpx;
		margin-right: 20rpx;
	}

	.Hcontent {
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		position: relative;
		border-bottom: 2rpx solid #9999;
	}

	.Hcontent .user {
		display: flex;
	}

	.Hcontent .user image {
		width: 50rpx;
		height: 50rpx;
		margin-left: 20rpx;
		margin-top: 10rpx;
	}

	.Hcontent .today {
		position: absolute;
		top: 66rpx;
		left: 134rpx;
		font-size: 28rpx;
		color: #333333;
	}

	.profit {
		color: 28px;
		color: #333333;
		margin-right: 20rpx;
		margin-top: 36rpx;
	}

	.Hcontent:last-of-type {
		border: none;
	}

	.Hcontent:nth-of-type(3) {
		border: none;
	}
</style>
